/**
 * PLC
 * @author xiaoxujs
 */

import { FC, useCallback, useEffect, useState } from "react";
import { CardHtmlBox, ListStyleModuleBox } from "./style";
import { Button, message } from "antd";
import { PLCCanshuBox } from "../../style";
import { ITlplTLaneQueryPlcParam } from "./type";
import { getTlplTLaneQueryPlcParam } from "./api";
import SetPlcModule from "./PLCSetMoudle";
import PianyiliangSetModule from "./PianyiliangSetModule";


const PLCParamsModule: FC<{
    laneId?: string; // 装车站ID
}> = ({
    laneId
}) => {
        const [setPlcShow, setSetPlcShow] = useState(false); // 设置PLC参数设置弹窗
        const [pianyiliangSetShow, setPianyiliangSetShow] = useState(false); // 设置 偏移量参数设置弹窗
        /**
         * 设置PLC参数
         */
        const [plcParameters, setPlcParameters] = useState<ITlplTLaneQueryPlcParam>(); //PLC参数
        // PLC数据
        const plcParametersFun = useCallback(async () => {
            if (laneId) {
                const { code, msg, data } = await getTlplTLaneQueryPlcParam({ laneId: laneId }) as { code: number, msg: string, data: ITlplTLaneQueryPlcParam };
                if (code === 20000) {
                    setPlcParameters(data);
                } else {
                    message.error(msg);
                }
            }
        }, [laneId])
        useEffect(() => {
            plcParametersFun();
        }, [plcParametersFun])

        // plc参数设置回调
        const handlePlcSetCallback = () => {
            setSetPlcShow(false);
            plcParametersFun();
        }
        // 偏移量参数设置回调
        const handleSetPianyiliangCallback = () => {
            setPianyiliangSetShow(false);
        }
        return <CardHtmlBox>
            <div className="box-top">
                <div className="box-top-title">PLC参数</div>
                <Button type="link" onClick={() => setSetPlcShow(true)}>设置参数</Button>
            </div>
            <PLCCanshuBox>
                <ListStyleModuleBox>
                    <tr className="box-title-tr">
                        <th align='center'>名称</th>
                        <th align='center'>设备IP地址</th>
                        <th align='center'>设备端口号</th>
                        <th align='center'>连接超时时间(毫秒)</th>
                        <th align='center'>读写超时时间(毫秒)</th>
                        <th align='center'>操作</th>
                    </tr>
                    <tr className="box-tr">
                        <td align='center'>{plcParameters && (plcParameters.plcName || '--')}</td>
                        <td align='center'>{plcParameters && (plcParameters.plcIp || '--')}</td>
                        <td align='center'>{plcParameters && (plcParameters.plcPort || '--')}</td>
                        <td align='center'>{plcParameters && (plcParameters.plcConnectOutTime || '--')}</td>
                        <td align='center'>{plcParameters && (plcParameters.plcReadWriteOutTime || '--')}</td>
                        <td align='center'>
                            <Button type="link" onClick={() => setPianyiliangSetShow(true)}>偏移量参数</Button>
                        </td>
                    </tr>
                </ListStyleModuleBox>
            </PLCCanshuBox>
            {/* 设置PLC参数 */}
            <SetPlcModule
                open={setPlcShow}
                handleSetPlcCallback={handlePlcSetCallback}
                clickData={plcParameters}
            />
            {/* 偏移量设置 */}
            <PianyiliangSetModule
                open={pianyiliangSetShow}
                handleSetCallback={handleSetPianyiliangCallback}
                laneId={laneId}
            />
        </CardHtmlBox>
    }

export default PLCParamsModule;